<template>
	<view>
	
		<view class="head"><image src="../../static/shopImage/timg.jpg" mode=""></image></view>
		<view class="commodity">
			<view class="commodityOne">
				<view class="top">劳斯莱斯</view>
				<view class="center">¥38888888.00</view>
				<view class="bott">
					<view class="">销量: 0</view>
					<view class="left">总库存: 9</view>
				</view>
			</view>
			<view class="box" @click="Showxin">
				<image :src="xin" mode=""></image>
				<view class="shou">收藏</view>
			</view>
		</view>
		<view class="specification">
			<view class="specificationList">
				<view class="specificationLeft">规格列表</view>
				<view class="specificationRight" @click="Showbox">
					<view class="box">{{ msg }}</view>
					<image :src="sizeImage" mode=""></image>
				</view>
			</view>
		</view>
		<view class="size" v-show="Showsize">
			<view class="sizeTop">
				<view class="">规格（¥）</view>
				<view class="">库存</view>
				<view class="">价格</view>
				<view class="">销量</view>
			</view>
			<view class="sizeBot">
				<view class="">尺寸(388.0）</view>
				<view class="">54</view>
				<view class="">¥388.00</view>
				<view class="">10</view>
			</view>
		</view>
		<view class="describe">商品描述</view>
		<view class="describetwo">商品描述</view>

		<view class="tarbar">
			<view class="box">
				<view class="one">
					<image src="../../static/shopImage/bbbb.png" mode=""></image>
					<view class="txt">店铺</view>
				</view>
				<view class="one">
					<image src="../../static/shopImage/phone.png" mode=""></image>
					<view class="txt">联系</view>
				</view>
				<view class="one">
					<image src="../../static/shopImage/car.png" mode=""></image>
					<view class="txt">购物车</view>
					<view class="dian" v-show="dian">1</view>
				</view>
			</view>
			<view class="two" @click="addCar">加入购物车</view>
		</view>
		
		<!-- 添加购物车 -->
		<view class="addCar" v-show="showCar">
			<view class="addCarTop">
				<view class="">
					规格
				</view>
				<view class="">
					单价
				</view>
				<view class="">
					数量
				</view>
			</view>
			<view class="addCarbot">
				<view class="">
					大码/红色
				</view>
				<view class="box">
					¥120.00
				</view>
				<view class="boxB">
					<stepper style="float: right;" size="small" :min="0" :max="20" @change="changeNum()"></stepper>
				</view>
			</view>
			<view class="heji">
				<view class="tet">
					合计:<text>¥365</text>
				</view>
				<view class="but">
					加入购物车
				</view>
			</view>
			<view class="cuo" @click="CloseCuo">
				<image src="../../static/shopImage/cuo.png" mode=""></image>
			</view>
		</view>
					<view class="meng" v-show="meng"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			msg: '全部展开',
			Showsize: false,
			sizeImage: '../../static/images/arrow_down.png',
			dian: '',
			hongxin: 0,
			xin: '../../static/shopImage/xin.png',
			meng: false, //蒙层
			showCar:false,//去购物车
			
		};
	},
	methods: {
		Showxin() {
			if (this.hongxin) {
				(this.hongxin = 0), (this.xin = '../../static/shopImage/xin.png');
				// console.log(this.hongxin);
			} else {
				(this.hongxin = 1), (this.xin = '../../static/shopImage/hongxin.png');
				// 	console.log(this.hongxin);
			}
		},
		Showbox() {
			if (this.Showsize) {
				(this.Showsize = false), (this.msg = '全部展开');
				this.sizeImage = '../../static/images/arrow_down.png';
			} else {
				(this.Showsize = true), (this.msg = '全部收起');
				this.sizeImage = '../../static/images/arrow_ondown.png';
			}
		},
		addCar(){
			this.meng=true,
			this.showCar=true;
			},
		CloseCuo(){
			this.meng=false,
			this.showCar=false;
		},
			showku(){
				this.$emit('click',1)
			}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f4f8;
}
.sales{
	height: 95rpx;
	line-height: 95rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin-bottom: 20rpx;
	.salesLeft{
		width: 49%;
	
	}
	.salesRight{
		width: 49%;
			border-bottom: 3rpx solid #128EF9;
	}
}
.head {
	height: 562rpx;
	image {
		width: 100%;
		height: 562rpx;
	}
}
.commodity {
	height: 211rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	padding-top: 30rpx;
	position: relative;
	.commodityOne {
		.top {
			margin: 30rpx;
			margin-top: 0;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.center {
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(246, 68, 68, 1);
		}
		.bott {
			margin-left: 30rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			display: flex;
			.left {
				margin-left: 139rpx;
			}
		}
	}
	.box {
		height: 89rpx;
		width: 189rpx;
		position: absolute;
		border-left: 2rpx solid #eeeeee;
		right: 0;
		top: 35rpx;
		image {
			width: 44rpx;
			height: 44rpx;
			margin-left: 73rpx;
		}
		.shou {
			margin-left: 72rpx;
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
		}
	}
}
.specification {
	margin-top: 20rpx;
	border-bottom: 2rpx solid #eeeeee;
	.specificationList {
		height: 105rpx;
		line-height: 105rpx;
		background-color: #ffffff;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		.specificationLeft {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.specificationRight {
			display: flex;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(36, 154, 246, 1);
			line-height: 36px;
			.box {
				line-height: 108rpx;
			}
			image {
				width: 17rpx;
				height: 10rpx;
				margin-left: 22rpx;
				margin-top: 48rpx;
			}
		}
	}
}
.size {
	background-color: #eeeeee;
	padding-left: 59rpx;
	padding-right: 25rpx;
	.sizeTop {
		height: 88rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 36px;
		display: flex;
		justify-content: space-between;
		line-height: 88rpx;
		border-bottom: 2rpx solid #cccccc;
	}
	.sizeBot {
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		line-height: 88rpx;
		border-bottom: 2rpx solid #cccccc;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		margin-right: 20rpx;
	}
}
.describe {
	height: 101rpx;
	font-size: 32rpx;
	background-color: #ffffff;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	border-bottom: 2rpx solid #eeeeee;
	padding-left: 29rpx;
	line-height: 101rpx;
}
.describetwo {
	height: 101rpx;
	font-size: 28rpx;
	background-color: #ffffff;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	border-bottom: 2rpx solid #eeeeee;
	padding-left: 29rpx;
	line-height: 101rpx;
}
.tarbar {
	height: 110rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	background-color: #ffffff;
	.box {
		display: flex;
		justify-content: space-between;
		padding-left: 60rpx;
		flex: 1;
		padding-right: 60rpx;
	}
	.two {
		width: 279rpx;
		background-color: #f93c45ff;
		line-height: 110rpx;
		text-align: center;
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.one {
		margin-top: 10rpx;
		position: relative;
		image {
			height: 44rpx;
			width: 44rpx;
			margin-top: 11rpx;
		}
		.dian {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			font-size: 22rpx;
			position: absolute;
			color: #ffffff;
			line-height: 30rpx;
			text-align: center;
			top: 0;
			left: 24rpx;
			background-color: #f93c45;
		}
	}
	.text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(247, 110, 117, 1);
	}
	.txt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.meng {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: fixed;
	top: 0;
}

.addCar{
	width: 100%;
	position: relative;
	position: fixed;
	bottom: 0rpx;
	z-index: 2;
	border-radius: 20rpx;
	font-size:30rpx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	.addCarTop{
		height: 109rpx;
		line-height: 109rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 2rpx solid #eeeeee;
	}
	.addCarbot{
		height: 109rpx;
		line-height: 109rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 2rpx solid #eeeeee;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		.box{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(246,68,68,1);
			position: relative;
			left: 34rpx;
		}
		.boxB{
			margin-top: 32rpx;
			
		}
	}
		
	.heji{
		height: 98rpx;
		background-color: #FFFFFF;
		display: flex;
		.tet{
			flex: 1;
			line-height: 98rpx;
			text-align: center;
			text{
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(249,60,69,1);
			}
		}
		.but{
			width: 295rpx;
			background-color:#F93C45FF;
			color: #FFFFFF;
			font-size:30rpx;
			text-align: center;
			line-height: 98rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
	.cuo{
		position: absolute;
		top:-160rpx;
	    left: 340rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
}
</style>

